<template>
  <div>
      <el-button @click="add">添加</el-button>
      <el-form :label-position="labelPosition" label-width="80px" :model="esGoodsVo">
        <el-form-item label="标题" style="width: 400px;">
          <el-input v-model="esGoodsVo.title"></el-input>
        </el-form-item>
        <el-form-item label="最低价格" style="width: 400px;">
          <el-input v-model="esGoodsVo.startPrice"></el-input>
        </el-form-item>
        <el-form-item label="最高价格" style="width: 400px;">
          <el-input v-model="esGoodsVo.endPrice"></el-input>
        </el-form-item>


        <el-form-item label="分类">
          <el-select v-model="esGoodsVo.categoryId" placeholder="请选择" @change="findall2(esGoodsVo.categoryId)">
            <el-option
                v-for="item in list1"
                :key="item.cid"
                :label="item.cName"
                :value="item.cid">
            </el-option>
          </el-select>
          <el-select v-model="cid" placeholder="请选择" >
            <el-option
                v-for="item in list2"
                :key="item.cid"
                :label="item.cName"
                :value="item.cid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findpage">查询</el-button>
        </el-form-item>
      </el-form>


        <el-table
            :data="list"
            border
            style="width: 100%"
            :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
          <el-table-column
              prop="id"
              label="编号"
              width="180">
          </el-table-column>
          <el-table-column
              label="标题"
              width="180">
            <template slot-scope="scope">
              <span v-html="scope.row.title"></span>
            </template>
          </el-table-column>
          <el-table-column
              prop="price"
              label="价格"
              width="180">
          </el-table-column>



          <el-table-column label="图片"width="200">
            <template slot-scope="scope"  >
              <img :src="scope.row.images"  style="width: 200px;height: 120px">
            </template>
          </el-table-column>
          <el-table-column
              prop="cateoryName"
              label="分类"
              width="180">
          </el-table-column>
          <el-table-column
              label="状态"
              width="180">
            <template slot-scope="scope"
                      >
              {{scope.row.status==1?"上架":"下架"}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning" round v-if="scope.row.status==1" @click="updatestatus(scope.row.id,1)">下架</el-button>
              <el-button type="warning" round v-if="scope.row.status==0" @click="updatestatus(scope.row.id,0)">上架</el-button>
            </template>
          </el-table-column>
        </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center">
    </el-pagination>


  </div>
</template>
<script>
  export default {
    data(){
      return{
        list:[],
        pageNum:1,
        pageSize:3,
        esGoodsVo:{
          categoryId:null,
        },
        list1:[],
        list2:[],
        total:0,
        cid:""
      }
    },
    methods:{

      add(){
        this.$router.push("goodslistadd");
      },
      findpage(){
        this.$http.post(`goods/findpage/${this.pageNum}/${this.pageSize}`,this.esGoodsVo)
        .then(res=>{
          this.list=res.data.data.items;
          this.total=res.data.data.total;
        }).catch(err=>{
          console.log(err);
        })
      },
      updatestatus(id,status){

        this.$http.post(`users/updatestatus/${id}/${status}`)
            .then(res=>{
              this.findpage();
              this.$message.success("修改成功");

            }).catch(err=>{
          console.log(err);
        })

      },
      findall(){
        this.$http.get(`/users/findall1`)
            .then(res=>{
              this.list1=res.data.data;

            }).catch(err=>{
          console.log(err);
        })
      },
      findall2(cid){
        var id= cid;
        this.list2=[];
        this.$http.get(`users/findall2/${id}`)
            .then(res=>{
              this.list2=res.data.data;
            }).catch(err=>{

        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=val;
        this.findpage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val;
        this.findpage();
      },

    },
    created() {
      this.findpage();
      this.findall();
    }
  }
</script>
<style>

</style>